@media (max-width: 768px) {
    .header {
        max-width: 1000px;
    }
    .container {
        padding: 0 10px;
    }
    body.status-page .section-status {
        width: 80%;
    }
}

@media (max-width: 540px) {
    #main-page-alert {
        margin-top: 20px; 
    }
    #app > div.about-app > p {
        padding-bottom: 5px; 
    }
}

body.status-page h5{
    font-size: 1.5em;
}

p {
    text-align: center;
    font-weight: 100;
}

.section-components a, .section-components a:hover, .section-metrics a, .section-metrics a:hover, .section-stickied a, .section-stickied a:hover {
    text-decoration: none !important;
    color: #333333;
}

div {
    display: block;
    unicode-bidi: isolate;
}

body {
    background-color: #f6f7f9;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.body.status-page {
    font-family: "Open Sans", sans-serif;
}

#app.container {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

body.status-page .section-status {
    display: flex;
    justify-content: center;
}

body.status-page .section-components, body.status-page .section-metrics, body.status-page .section-scheduled, body.status-page .section-timeline {
  width: 85%;
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 20px;
}

#main-page-alert {
    width: 600px;
}

body.status-page .alert {
    width: auto;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-size: 1.8em;
    font-weight: 400;
    margin: 50px auto 12px;
    border: none;
    border-radius: 5px;
    font-optical-sizing: auto;
}

body.status-page .about-app {
    width: 85%;
    padding: 0 10px;
    margin-bottom: 20px;
}
  
body.status-page .about-app p {
    font-size: 1.4rem;
    color: #171717 !important;
    margin-inline: 25px;
    padding-bottom: 55px;
}

body.status-page .about-app a {
    font-size: 1.4rem;
    color: #171717 !important;
}

.panel {
    box-shadow: none;
}

.panel-body ul {
    list-style-type: disc;
}

body.status-page .card.schedule > p,
body.status-page .card.schedule > ul,
body.status-page .card.schedule > ol,
body.status-page .card.schedule > ul li,
body.status-page .card.schedule > ol li,
body.status-page .card.incident > p,
body.status-page .card.incident > ul,
body.status-page .card.incident > ol,
body.status-page .card.incident > ul li,
body.status-page .card.incident > ol li,
body.status-page .panel-message .panel-body p,
body.status-page .panel-message .panel-body ul,
body.status-page .panel-message .panel-body ol,
body.status-page .panel-message .panel-body li {
    color: #333 !important;
    font-weight: 400 !important;
    text-align: left !important;
}

body.status-page .card.schedule [style*="color"],
body.status-page .card.incident [style*="color"],
body.status-page .panel-message .panel-body [style*="color"] {
    color: unset !important;
}

.ion {
    display: none;
}

body.status-page .timeline .moment .list-group.components .panel-body p, body.status-page .timeline .moment .panel .panel-body p {
    text-align: left;
}